<template>
    <div class="mes-management">
        <el-container class="layout-container">
            <!-- 侧边栏菜单 -->
            <el-aside width="250px" class="sidebar">
                <div class="logo-section">
                    <h2>MES管理系统</h2>
                </div>
                <el-menu :default-active="activeMenu" class="sidebar-menu" background-color="#304156"
                    text-color="#bfcbd9" active-text-color="#409EFF" :unique-opened="true" @select="handleMenuSelect">
                    <!-- 原料管理 -->
                    <el-sub-menu index="material">
                        <template #title>
                            <el-icon>
                                <Box />
                            </el-icon>
                            <span>原料管理</span>
                        </template>
                        <el-menu-item index="material-list">原料清单</el-menu-item>
                    </el-sub-menu>
                    <!-- BOM管理 -->
                    <el-sub-menu index="bom">
                        <template #title>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>BOM管理</span>
                        </template>
                        <el-menu-item index="bom-info">BOM信息查看</el-menu-item>
                    </el-sub-menu>

                    <!-- 生产管理 -->
                    <el-sub-menu index="production">
                        <template #title>
                            <el-icon>
                                <Operation />
                            </el-icon>
                            <span>生产管理</span>
                        </template>
                        <el-menu-item index="production-dashboard">生产大屏</el-menu-item>
                        <el-menu-item index="production-order">生产订单</el-menu-item>
                        <el-menu-item index="production-plan">生产计划</el-menu-item>
                        <el-menu-item index="production-workorder">生产工单</el-menu-item>
                        <el-menu-item index="production-report">报工记录</el-menu-item>
                    </el-sub-menu>

                    <!-- 工艺工序管理 -->
                    <el-sub-menu index="process">
                        <template #title>
                            <el-icon>
                                <Tools />
                            </el-icon>
                            <span>工艺工序管理</span>
                        </template>
                        <el-menu-item index="process-craft">工艺管理</el-menu-item>
                        <el-menu-item index="process-procedure">工序管理</el-menu-item>
                    </el-sub-menu>

                    <!-- 质检管理 -->
                    <el-sub-menu index="quality">
                        <template #title>
                            <el-icon>
                                <Medal />
                            </el-icon>
                            <span>质检管理</span>
                        </template>
                        <el-menu-item index="quality-material">成品质检</el-menu-item>
                        <el-menu-item index="quality-plan">质检方案</el-menu-item>
                        <el-menu-item index="quality-recheck">复检管理</el-menu-item>
                        <el-menu-item index="quality-team">质检组</el-menu-item>
                    </el-sub-menu>

                    <!-- 车间机床管理 -->
                    <el-sub-menu index="workshop">
                        <template #title>
                            <el-icon>
                                <Monitor />
                            </el-icon>
                            <span>车间机床管理</span>
                        </template>
                        <el-menu-item index="workshop-manage">车间管理</el-menu-item>
                        <el-menu-item index="workshop-machine">机床管理</el-menu-item>
                    </el-sub-menu>

                    <!-- 工人工时管理 -->
                    <el-sub-menu index="worker">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>工人工时管理</span>
                        </template>
                        <el-menu-item index="worker-worktime">工人工时管理</el-menu-item>
                        <el-menu-item index="worker-list">工人列表</el-menu-item>
                    </el-sub-menu>

                    <!-- 系统管理 -->
                    <el-sub-menu index="system">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="user-management">用户管理</el-menu-item>
                        <el-menu-item index="role-management">角色管理</el-menu-item>
                        <el-menu-item index="permission-management">权限管理</el-menu-item>
                        <el-menu-item index="system-config">系统配置</el-menu-item>
                        <el-menu-item index="system-log">系统日志</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <!-- 主内容区域 -->
            <el-container>
                <!-- 顶部导航栏 -->
                <el-header class="header">
                    <div class="header-left">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>MES管理系统</el-breadcrumb-item>
                            <el-breadcrumb-item>{{ currentMenuName }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="header-right">
                        <el-dropdown @command="handleUserCommand">
                            <span class="user-info">
                                <el-icon>
                                    <User />
                                </el-icon>
                                管理员
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="settings">系统设置</el-dropdown-item>
                                    <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>

                <!-- 主要内容区域 -->
                <el-main class="main-content">
                    <div class="content-wrapper">
                        <!-- 根据选中的菜单显示不同内容 -->
                        <component :is="currentComponent" />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Operation,
    Medal,
    Tools,
    Box,
    User,
    DataAnalysis,
    Setting,
    ArrowDown,
    Document,
    Monitor
} from '@element-plus/icons-vue'
import DefaultContent from '../components/mes/DefaultContent.vue'
import ProductionPlan from '../components/mes/ProductionPlan.vue'
import WorkOrder from '../components/mes/WorkOrder.vue'

const router = useRouter()

// 当前选中的菜单项
const activeMenu = ref('material-list')

// 菜单名称映射
const menuNames: Record<string, string> = {
    'material-list': '原料清单',
    'bom-info': 'BOM信息查看',
    'production-dashboard': '生产大屏',
    'production-order': '生产订单',
    'production-plan': '生产计划',
    'production-workorder': '生产工单',
    'production-report': '报工记录',
    'process-craft': '工艺管理',
    'process-procedure': '工序管理',
    'quality-material': '原料质检',
    'quality-plan': '质检方案',
    'quality-recheck': '复检管理',
    'quality-team': '质检组',
    'workshop-manage': '车间管理',
    'workshop-machine': '机床管理',
    'worker-worktime': '工人工时管理',
    'worker-list': '工人列表',
    'user-management': '用户管理',
    'role-management': '角色管理',
    'permission-management': '权限管理',
    'system-config': '系统配置',
    'system-log': '系统日志'
}

// 组件映射
const componentMap: Record<string, any> = {
    'material-list': DefaultContent, // 原料清单
    'bom-info': DefaultContent, // BOM信息查看
    'production-dashboard': DefaultContent, // 生产大屏
    'production-order': DefaultContent, // 生产订单
    'production-plan': ProductionPlan, // 生产计划
    'production-workorder': WorkOrder, // 生产工单
    'production-report': DefaultContent, // 报工记录
    'process-craft': DefaultContent, // 工艺管理
    'process-procedure': DefaultContent, // 工序管理
    'quality-material': DefaultContent, // 原料质检
    'quality-plan': DefaultContent, // 质检方案
    'quality-recheck': DefaultContent, // 复检管理
    'quality-team': DefaultContent, // 质检组
    'workshop-manage': DefaultContent, // 车间管理
    'workshop-machine': DefaultContent, // 机床管理
    'worker-worktime': DefaultContent, // 工人工时管理
    'worker-list': DefaultContent, // 工人列表
    'user-management': DefaultContent, // 用户管理
    'role-management': DefaultContent, // 角色管理
    'permission-management': DefaultContent, // 权限管理
    'system-config': DefaultContent, // 系统配置
    'system-log': DefaultContent, // 系统日志
    default: DefaultContent
}

// 当前菜单名称
const currentMenuName = computed(() => {
    return menuNames[activeMenu.value] || '未知页面'
})

// 当前组件
const currentComponent = shallowRef(componentMap['material-list'] || componentMap.default)

// 处理菜单选择
const handleMenuSelect = (index: string) => {
    activeMenu.value = index
    currentComponent.value = componentMap[index] || componentMap.default
}

// 处理用户下拉菜单
const handleUserCommand = (command: string) => {
    switch (command) {
        case 'profile':
            console.log('打开个人中心')
            ElMessage.info('个人中心功能开发中...')
            break
        case 'settings':
            console.log('打开系统设置')
            ElMessage.info('系统设置功能开发中...')
            break
        case 'logout':
            handleLogout()
            break
    }
}

// 处理退出登录
const handleLogout = () => {
    ElMessageBox.confirm(
        '确认退出登录吗？',
        '退出确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 清除登录状态
        localStorage.removeItem('isLoggedIn')
        localStorage.removeItem('username')
        localStorage.removeItem('rememberedUser')

        ElMessage.success('已成功退出登录')

        // 跳转到登录页
        router.push('/login')
    }).catch(() => {
        ElMessage.info('已取消退出')
    })
}
</script>

<style scoped>
.mes-management {
    height: 100vh;
    width: 100%;
}

.layout-container {
    height: 100%;
}

/* 侧边栏样式 */
.sidebar {
    background-color: #304156;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.logo-section {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #434a50;
    margin-bottom: 0;
}

.logo-section h2 {
    color: #ffffff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.sidebar-menu {
    border: none;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.sidebar-menu:not(.el-menu--collapse) {
    width: 250px;
}

/* 顶部导航栏样式 */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-left .el-breadcrumb {
    font-size: 14px;
}

.header-right {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
}

.user-info .el-icon {
    margin-right: 5px;
}

.user-info .el-icon--right {
    margin-left: 5px;
    margin-right: 0;
}

/* 主内容区域样式 */
.main-content {
    background-color: #f5f5f5;
    padding: 20px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.content-wrapper {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 100%;
}

/* 滚动条样式 */
.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar {
        width: 200px !important;
    }

    .sidebar-menu:not(.el-menu--collapse) {
        width: 200px;
    }

    .logo-section h2 {
        font-size: 16px;
    }
}
</style>
